<template>
  <view v-if="desc.name" :style="theme">
    <view
      class="banner"
      :style="{ backgroundImage: 'url(' + desc.fullImgurl + ')' }"
      @click="previewImg(desc.fullImgurl)"
    ></view>
    <!-- v-if="desc.secKillInfo && desc.secKillInfo.type == '0'" -->
    <view
      class="miaosha"
      :style="{ backgroundImage: 'url(' + imgHost + '/miaosha_bgbg.png)' }"
    >
      <view class="left">
        <view class="cnt flex">
          <image :src="imgHost + '/ic_miaosha@2x (1).png'"></image>
          <view v-if="desc.secKillInfo.surplus != '不限制'">
            仅剩{{ desc.secKillInfo.surplus || 0 }}件
          </view>
          <view v-else>不限制</view>
        </view>
        <view class="priceCnt f26 cf mt10">
          <text>秒杀价</text>
          <text>¥</text>
          <text>{{ desc.secKillInfo.discountPrice || 0 }}</text>
          <text>¥{{ desc.price || 0 }}</text>
        </view>
      </view>
      <view class="right">
        <view class="cf f24">
          {{
            desc.secKillInfo.status == "0"
              ? "距活动开始："
              : desc.secKillInfo.status == "1"
              ? "距活动结束："
              : "活动已结束"
          }}
        </view>
        <u-count-down
          :time="desc.secKillInfo.duration * 1000"
          format="DD:HH:mm:ss"
          autoStart
          millisecond
          @change="onChange"
          @finish="getDetail"
        >
          <view class="time">
            <text
              v-if="timeData.days && timeData.days > 0"
              class="time__item"
              >{{ timeData.days }}</text
            >
            <text class="jg">天</text>
            <text class="time__item">{{
              timeData.hours >= 10 ? timeData.hours : "0" + timeData.hours
            }}</text>
            <text class="jg">:</text>
            <text class="time__item">{{ timeData.minutes }}</text>
            <text class="jg">:</text>
            <text class="time__item">{{ timeData.seconds }}</text>
          </view>
        </u-count-down>
      </view>
    </view>
    <view
      v-if="desc.secKillInfo && desc.secKillInfo.type == '1'"
      class="zhekou"
      :style="{ backgroundImage: 'url(' + imgHost + '/bg_zhekou@2x.png)' }"
    >
      <image :src="imgHost + '/ic_hekou@2x.png'" class="left"></image>
      <view class="priceCnt cf">
        <view>
          <text>¥</text>
          <text>{{ desc.secKillInfo.discountPrice || 0 }}</text>
        </view>
        <view>原价 ¥{{ desc.price || 0 }}</view>
      </view>
      <view class="right">
        <view class="cf f24">
          {{
            desc.secKillInfo.status == "0"
              ? "距活动开始："
              : desc.secKillInfo.status == "1"
              ? "距活动结束："
              : "活动已结束"
          }}
        </view>
        <u-count-down
          :time="desc.secKillInfo.duration * 1000"
          format="DD:HH:mm:ss"
          autoStart
          millisecond
          @change="onChange"
          @finish="getDetail"
        >
          <view class="time">
            <text
              v-if="timeData.days && timeData.days > 0"
              class="time__item"
              >{{ timeData.days }}</text
            >
            <text v-if="timeData.days && timeData.days > 0" class="jg">天</text>
            <text class="time__item">{{
              timeData.hours >= 10 ? timeData.hours : "0" + timeData.hours
            }}</text>
            <text class="jg">:</text>
            <text class="time__item">{{ timeData.minutes }}</text>
            <text class="jg">:</text>
            <text class="time__item">{{ timeData.seconds }}</text>
          </view>
        </u-count-down>
      </view>
    </view>
    <view
      class="head"
      :class="
        desc.secKillInfo && desc.secKillInfo.type == '0'
          ? 'ms'
          : desc.secKillInfo && desc.secKillInfo.type == '1'
          ? 'zk'
          : ''
      "
    >
      <view class="title" :class="desc.courseType == '1' ? '' : 'lv'">
        <text>{{
          desc.mealsType == 0
            ? "门票次数卡"
            : desc.mealsType == 1
            ? "门票期限卡"
            : desc.mealsType == 3
            ? "课程预约次卡"
            : desc.mealsType == 4
            ? "课程预约期限卡"
            : "预定次卡"
        }}</text>
        <view>{{ desc.name }}</view>
      </view>
      <view class="info" v-if="desc.indate">有效期：{{ desc.indate }}天</view>
      <view class="box_item_num">
        <text>购买数量：</text>
        <u-number-box v-model="num" button-size="26"></u-number-box>
      </view>
    </view>
    <block v-if="shopHome == 1 && desc.venue">
      <view class="shopVenueDetail flex mb2" @click="tzVenDetail(desc.venue)">
        <image
          :src="
            desc.venue && desc.venue.logo
              ? desc.venue.logo
              : imgHost + '/default_changguan.jpg'
          "
          class="venImg"
        ></image>
        <view class="venDetail flex flex_between">
          <view class="venDetailLeft">
            <view class="f30 c2 fw5">
              {{ desc.venue.venueName }}
            </view>
            <view class="f26 c9" style="margin-top: 2rpx">
              {{ desc.venue.address }}
            </view>
          </view>
          <u-icon name="arrow-right" color="#999999" size="32rpx"></u-icon>
        </view>
      </view>
    </block>
    <view class="content">
      <view class="bt">套餐信息</view>
      <view class="sm">类型</view>
      <view class="nr">
        {{
          desc.mealsType == 0
            ? "门票次数卡"
            : desc.mealsType == 1
            ? "门票期限卡"
            : desc.mealsType == 3
            ? "课程预约次卡"
            : desc.mealsType == 4
            ? "课程预约期限卡"
            : "预定次卡"
        }}
      </view>
      <view v-if="desc.nums" class="sm">可用次数</view>
      <view v-if="desc.nums" class="nr">{{ desc.nums }}次</view>
      <view class="sm">生效方式</view>
      <view class="nr">{{ desc.validTimeInfo || "购买后生效" }}</view>
      <view v-if="desc.useTimeInfo" class="sm">时间段限制</view>
      <view v-if="desc.useTimeInfo" class="nr">{{ desc.useTimeInfo }}</view>
      <view class="sm">适用场馆</view>
      <view class="nr">{{ desc.useVenue || "全部场馆" }}</view>
      <view class="sm">适用项目</view>
      <view class="nr">{{ desc.useProject || "全部项目" }}</view>
    </view>
    <view v-if="desc.content" class="content">
      <view class="f32 c2 fwb mb12">套餐描述</view>
      <view class="f28 c2">{{ desc.content }}</view>
    </view>
    <!-- 占位 -->
    <view class="box_x"></view>
    <!-- 底部充值 -->
    <view class="box_footer">
      <view class="flex xieyi">
        <view class="checkboxBoxD" @click="isTy">
          <view class="checkboxBox" :class="isActive ? 'on' : ''">
            <u-icon
              v-if="isActive"
              name="checkmark-circle-fill"
              size="44rpx"
            ></u-icon>
          </view>
        </view>
        <view
          >我已阅读并同意<text class="ztColor" @click="open"
            >《套餐购买协议》</text
          ></view
        >
      </view>
      <view class="box_active_footer">
        <view class="left">
          <view class="hj">
            <text>合计：</text>
            <block>
              <text
                v-if="
                  desc.secKillInfo &&
                  (desc.secKillInfo.surplus == '不限制' ||
                    desc.secKillInfo.surplus > 0)
                "
                class="fh"
                >{{
                  desc.secKillInfo.discountPrice &&
                  Number(desc.secKillInfo.discountPrice) > 0
                    ? "¥"
                    : ""
                }}</text
              >
              <text v-else class="fh">{{
                desc.price && Number(desc.price) > 0 ? "¥" : ""
              }}</text>
            </block>
            <block>
              <text
                v-if="
                  desc.secKillInfo &&
                  (desc.secKillInfo.surplus == '不限制' ||
                    desc.secKillInfo.surplus > 0)
                "
                class="price"
                :class="desc.secKillInfo.discountPrice ? '' : 'green f28i'"
                >{{ desc.secKillInfo.discountPrice || "免费" }}</text
              >
              <text
                v-else
                class="price"
                :class="
                  desc.price && Number(desc.price) > 0 ? '' : 'green f28i'
                "
                >{{
                  desc.price && Number(desc.price) > 0 ? desc.price : "免费"
                }}</text
              >
            </block>
          </view>
          <view
            v-if="
              desc.secKillInfo &&
              (desc.secKillInfo.surplus == '不限制' ||
                desc.secKillInfo.surplus > 0)
            "
            class="yj"
          >
            原价<text
              :class="desc.price && Number(desc.price) > 0 ? '' : 'green f28i'"
              >{{
                desc.price && Number(desc.price) > 0 ? desc.price : "免费"
              }}</text
            >
          </view>
        </view>
        <view class="right">
          <view
            v-if="
              (desc.secKillInfo && desc.secKillInfo.status == '0') ||
              (desc.secKillInfo &&
                desc.secKillInfo.status == '1' &&
                desc.secKillInfo.surplus < num)
            "
            class="yjBtn"
            @click="$noMultipleClicks(submit)"
            ><text>原价购买</text></view
          >
          <view
            v-if="
              desc.secKillInfo &&
              desc.secKillInfo.isNotify == '0' &&
              desc.secKillInfo.status == '0'
            "
            class="dyBtn on"
            @click="$noMultipleClicks(dyBtn)"
          >
            开抢提醒
          </view>
          <view
            v-if="
              desc.secKillInfo &&
              desc.secKillInfo.isNotify == '1' &&
              desc.secKillInfo.status == '0'
            "
            class="dyBtn hui"
          >
            已设置提醒
          </view>
          <view
            v-if="
              desc.secKillInfo &&
              (desc.secKillInfo.surplus == '不限制' ||
                (desc.secKillInfo.surplus > 0 &&
                  desc.secKillInfo.surplus >= num)) &&
              desc.secKillInfo.status == '1'
            "
            class="qgBtn"
            @click="$noMultipleClicks(qgBtn)"
            ><text>立即抢购</text></view
          >
          <view
            v-if="
              desc.secKillInfo &&
              desc.secKillInfo.surplus != '不限制' &&
              desc.secKillInfo.surplus < num &&
              desc.secKillInfo.status == '1' &&
              desc.secKillInfo.surplus > 0
            "
            class="qgBtn hui"
            ><text>库存不足</text></view
          >
          <view
            v-if="
              desc.secKillInfo &&
              desc.secKillInfo.surplus != '不限制' &&
              desc.secKillInfo.surplus < num &&
              desc.secKillInfo.status == '1' &&
              desc.secKillInfo.surplus == 0
            "
            class="qgBtn hui"
            ><text>抢光了</text></view
          >
          <view
            v-if="!desc.secKillInfo || desc.secKillInfo.status == '2'"
            class="gmBtn"
            @click="$noMultipleClicks(submit)"
            ><text>立即购买</text></view
          >
        </view>
      </view>
    </view>
    <u-popup :show="show" @close="onClickHide" mode="center" round="20rpx">
      <view class="agreement">
        <view class="agreement_bt">温馨提示</view>
        <view class="agreement_cnt">
          请先阅读并同意<text @click="open">《套餐购买协议》</text>
        </view>
        <view class="agreement_btns flex">
          <view @click="onClickHide">我再想想</view>
          <view class="agreement_qrBtn" @click="qrBtn">同意</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      noClick: true,
      id: "",
      num: 1,
      desc: {},
      time: "",
      isActive: false,
      xy: "",
      type: 0,
      show: false,
      timeData: {},
      pdQg: false,
    };
  },
  onLoad(ops) {
    uni.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"],
    });
    this.id = ops.id;
    this.getDetail();
  },
  onShareAppMessage(e) {
    let that = this;
    if (this.desc && this.desc.secKillInfo && this.desc.secKillInfo.imageUrl) {
      return {
        imageUrl: this.desc.secKillInfo.imageUrl,
      };
    } else {
      return {
        title: "套餐详情",
        path: `/pages/setmeal/detail?id=${that.id}`,
      };
    }
  },
  onShareTimeline() {
    let that = this;
    if (this.desc && this.desc.secKillInfo && this.desc.secKillInfo.imageUrl) {
      return {
        imageUrl: this.desc.secKillInfo.imageUrl,
      };
    } else {
      return {
        title: "套餐详情",
        path: `/pages/setmeal/detail?id=${that.id}`,
      };
    }
  },
  methods: {
    jump(url, params, a) {
      this.$app.jump(url, params, a);
    },
    jump2(url, params, a) {
      this.$app.jump2(url, params, a);
    },
    jump3(url, params, a) {
      this.$app.jump3(url, params, a);
    },
    tzVenDetail(item) {
      this.$store.commit("setVenueName", item.venueName);
      this.$store.commit("setVenueId", item.venueId);
      this.jump3("/pages/venue/indexShop?id=", item.venueId);
    },
    onChange(e) {
      this.timeData = e;
    },
    //单张图片预览
    previewImg(imgurl) {
      let _this = this;
      let imgsArray = [];
      imgsArray[0] = imgurl;
      uni.previewImage({
        current: 0,
        urls: imgsArray,
      });
    },
    isTy() {
      this.isActive = !this.isActive;
    },
    open() {
      // this.isActive = true
      this.jump(
        "/pages/home/meal?type=15&code=AGREEMENT_MEAL&title=",
        "套餐购买协议"
      );
    },
    onClickHide() {
      this.show = false;
    },
    qrBtn() {
      this.isActive = true;
      this.show = false;
      if (this.pdQg) {
        this.qgBtn();
      } else {
        this.submit();
      }
    },
    submit() {
      if (!this.isActive) {
        this.pdQg = false;
        this.show = true;
        return false;
      }
      this.$app
        .ajax({
          api: this.$api.mealsOnlinePayInfo(),
          data: {
            param: {
              venueId: this.venueId,
              memberId: this.userInfo.id,
              channelType: "01",
              mealsList: [
                {
                  id: this.id,
                  num: this.num,
                },
              ],
            },
          },
        })
        .then((res) => {
          if (res.errorCode === "000000") {
            this.jump3("/pages/order/pay?type=4&orderId=", res.record.orderId);
          }
        })
        .catch(() => {});
    },
    dyBtn() {
      this.$app
        .ajax({
          api: this.$api.addSecNotify(),
          data: {
            param: {
              id: this.desc.secKillInfo.id,
            },
          },
        })
        .then((res) => {
          if (res.errorCode === "000000") {
            this.$app.showToast("订阅成功");
            this.getDetail();
          }
        })
        .catch(() => {});
    },
    qgBtn() {
      if (!this.isActive) {
        this.pdQg = true;
        this.show = true;
        return false;
      }
      this.$app
        .ajax({
          api: this.$api.mealsOnlinePayInfo(),
          data: {
            param: {
              venueId: this.venueId,
              memberId: this.userInfo.id,
              channelType: "01",
              isJoin: "1",
              mealsList: [
                {
                  id: this.id,
                  num: this.num,
                },
              ],
            },
          },
        })
        .then((res) => {
          if (res.errorCode === "000000") {
            this.jump3("/pages/order/pay?type=4&orderId=", res.record.orderId);
          }
        })
        .catch(() => {});
    },
    getDetail() {
      this.$app
        .ajax({
          api: this.$api.mealsOnlineInfo(),
          data: {
            userId: this.userInfo.id,
            param: {
              id: this.id,
            },
          },
        })
        .then((res) => {
          if (res.errorCode === "000000") {
            let obj = res.record;
            // obj.secKillInfo = {
            // 	"id": 1,
            // 	"type": "0",
            // 	"status": "1",
            // 	"discountPrice": 10,
            // 	"surplus": "不限制",
            // 	"duration": 1866422,
            // 	"isNotify": "1"
            // }
            this.desc = obj;
          }
        })
        .catch(() => {});
    },
  },
};
</script>


<style scoped lang="scss">
.banner {
  width: 100%;
  height: 422rpx;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.head {
  margin-top: -30rpx;
  background-color: #ffff;
  margin-bottom: 20rpx;
  width: 690rpx;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding: 24rpx 30rpx 30rpx;
  background-color: #fff;
  border-radius: 8rpx;

  &.ms {
    margin-top: -70rpx;
  }

  .title {
    font-size: 36rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222222;
    display: flex;
    align-items: center;

    text {
      height: 40rpx;
      line-height: 40rpx;
      background: $color;
      border-radius: 8rpx;
      display: inline-block;
      padding: 0 10rpx;
      margin-right: 20rpx;
      font-size: 22rpx;
      color: #ffff;
    }
  }

  .info {
    font-size: 24rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #666666;
    margin-top: 15rpx;
    line-height: 1.5;
  }

  .box_item_num {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    margin-top: 20rpx;

    text {
      font-size: 26rpx;
      font-weight: 400;
      color: #333333;
    }
  }
}

.content {
  background-color: #ffff;
  margin-bottom: 20rpx;
  width: 690rpx;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding: 30rpx 30rpx;
  background-color: #fff;
  border-radius: 8rpx;

  .bt {
    font-size: 34rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: bolder;
    color: #222222;
  }

  .sm {
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 1;
    margin-top: 24rpx;
  }

  .nr {
    font-size: 28rpx;
    margin-top: 16rpx;
    line-height: 1.5;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #333333;
  }
}

.box_x {
  height: 210rpx;
}

.box_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  background-color: #f7f7f7;
  z-index: 99;

  .xieyi {
    padding: 10rpx 30rpx;
    box-sizing: border-box;
    background: $xybj;
  }

  .box_active_footer {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    background: #ffffff;

    .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 80rpx;

      .hj {
        text {
          color: #fe2c2e;

          &:nth-of-type(1) {
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #333333;
            width: 90rpx;
          }

          &.fh {
            font-size: 24rpx;
          }

          &.price {
            font-weight: bolder;
            font-size: 36rpx;
          }
        }
      }

      .yj {
        padding-left: 90rpx;
        text-decoration: line-through;
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #999999;
      }
    }

    .right {
      display: flex;
      justify-content: flex-end;
      flex: 1;

      view {
        margin-left: 20rpx;
      }

      .gmBtn {
        flex: none;
        background: $color;
        color: #fff;
        width: 200rpx;
        height: 80rpx;
        border-radius: 40rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 30rpx;
      }

      .qgBtn {
        flex: none;
        background: $color;
        color: #fff;
        width: 200rpx;
        height: 80rpx;
        background: linear-gradient(270deg, #fe2c2e 0%, #ff6a1f 100%);
        border-radius: 40rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 30rpx;

        &.hui {
          opacity: 0.5;
        }
      }

      .dyBtn {
        font-size: 30rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: Medium;
        color: #ffffff;
        width: 200rpx;
        height: 80rpx;
        background: linear-gradient(270deg, #fe2c2e 0%, #ff6a1f 100%);
        border-radius: 40rpx;
        line-height: 80rpx;
        text-align: center;

        &.hui {
          opacity: 0.5;
        }

        &.on {
          -webkit-animation-name: scaleDraw;
          /*关键帧名称*/
          -webkit-animation-timing-function: ease-in-out;
          /*动画的速度曲线*/
          -webkit-animation-iteration-count: infinite;
          /*动画播放的次数*/
          -webkit-animation-duration: 5s;
          /*动画所花费的时间*/
        }
      }

      .yjBtn {
        font-size: 30rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: Medium;
        color: #ffffff;
        width: 200rpx;
        height: 80rpx;
        background: linear-gradient(270deg, #fea82c 0%, #ffd34d 100%);
        border-radius: 40rpx;
        line-height: 80rpx;
        text-align: center;
      }
    }
  }
}

.miaosha {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  width: 100%;
  height: 220rpx;
  box-sizing: border-box;
  padding: 16rpx 30rpx 0 28rpx;
  display: flex;
  justify-content: space-between;

  .left {
    .cnt {
      image {
        width: 210rpx;
        height: 50rpx;
      }

      view {
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #fe2c2e;
        padding: 0 8rpx;
        line-height: 42rpx;
        background: #ffffff;
        position: relative;
        border-radius: 8rpx;
        margin-left: 18rpx;

        &::before {
          position: absolute;
          content: "";
          width: 0;
          height: 0;
          top: 11rpx;
          left: -10rpx;
          border-top: 10rpx solid transparent;
          border-right: 10rpx solid #fff;
          border-bottom: 10rpx solid transparent;
        }
      }
    }

    .priceCnt {
      line-height: 50rpx;

      text {
        display: inline-block;

        &:nth-of-type(2) {
          margin-left: 4rpx;
        }

        &:nth-of-type(3) {
          font-size: 48rpx;
          font-weight: bolder;
        }

        &:nth-of-type(4) {
          margin-left: 8rpx;
          text-decoration: line-through;
          color: rgba(255, 222, 222, 1);
        }
      }
    }
  }

  .right {
    text-align: right;
    box-sizing: border-box;
    padding-top: 22rpx;

    .f24 {
      margin-bottom: 10rpx;
    }

    .time {
      font-size: 22rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #fff;

      text {
        display: inline-block;

        &.jg {
          margin: 0 8rpx;
        }

        &.time__item {
          width: 44rpx;
          height: 44rpx;
          text-align: center;
          line-height: 44rpx;
          background: #fff;
          border-radius: 16rpx;
          font-size: 26rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: Medium;
          color: #fe2c2e;
        }
      }
    }
  }
}

.zhekou {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  width: 690rpx;
  height: 160rpx;
  margin: 20rpx auto 0;
  box-sizing: border-box;
  padding: 24rpx;
  display: flex;
  justify-content: space-between;

  .left {
    width: 68rpx;
    height: 68rpx;
    padding-right: 26rpx;
    flex: none;
    margin-right: 26rpx;
    border-right: 1px solid rgba(255, 255, 255, 0.26);
  }

  .priceCnt {
    flex: 1;

    view {
      line-height: 40rpx;

      text {
        display: inline-block;
        color: #fff;

        &:nth-of-type(1) {
          font-size: 26rpx;
        }

        &:nth-of-type(2) {
          font-size: 36rpx;
          font-weight: bolder;
          margin-left: 10rpx;
        }
      }

      &:nth-of-type(2) {
        line-height: 30rpx;
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        text-decoration: line-through;
        color: #ffdede;
      }
    }
  }

  .right {
    text-align: right;
    box-sizing: border-box;

    .f24 {
      margin-bottom: 10rpx;
      line-height: 1;
    }

    .time {
      font-size: 22rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #fff;

      text {
        display: inline-block;

        &.jg {
          margin: 0 8rpx;
        }

        &.time__item {
          width: 44rpx;
          height: 44rpx;
          text-align: center;
          line-height: 44rpx;
          background: #fff;
          border-radius: 16rpx;
          font-size: 26rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: Medium;
          color: #fe2c2e;
        }
      }
    }
  }
}

/*css部分*/
@keyframes scaleDraw {
  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
  0% {
    transform: scale(1);
    /*开始为原始大小*/
  }

  25% {
    transform: scale(1.06);
    /*放大1.06倍*/
  }

  50% {
    transform: scale(1);
  }

  75% {
    transform: scale(1.06);
  }
}
</style>